<template>
	<div style="padding: 2.25rem;background-color: white;">
		<el-row>
			<div style="display: flex;justify-content: space-between;">
				<h2>题库管理</h2>
				<el-button type="primary" @click="Home()">返回</el-button>
			</div>

		</el-row>
		<!-- <el-row style="margin-top: 1.25rem;">
			<el-col :span="22">
				<el-input v-model="input3" placeholder="请输入内容"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" icon="el-icon-search">搜索</el-button>
			</el-col>
		</el-row> -->
		<el-row style="margin-top: 1.625rem">
			<el-tabs @tab-click="handleClick">
				<el-tab-pane label="单选题目" name="first"></el-tab-pane>
				<el-tab-pane label="多选题目" name="second"></el-tab-pane>
				<el-tab-pane label="简答题目" name="third"></el-tab-pane>
				<el-tab-pane label="判断题目" name="fourth"></el-tab-pane>
				<el-tab-pane label="填空题目" name="five"></el-tab-pane>
			</el-tabs>
		</el-row>

		<el-table :data="tableData1" style="width: 100%; margin-top: 1.25rem" row-key="id" border>
			<el-table-column prop="id" label="Id" width="80"> </el-table-column>
			<el-table-column prop="knowledge.label" label="知识点" width="120">
			</el-table-column>
			<el-table-column prop="topic.topicName" label="题型" width="100">
			</el-table-column>
			<el-table-column prop="score" label="分数" width="100"> </el-table-column>
			<el-table-column prop="author" label="作者" width="100">
			</el-table-column>

			<el-table-column prop="score" label="题目" width="300">
				<template slot-scope="scope">
					<!-- <VueShowdown :markdown="scope.row.content" /> -->
				</template>
			</el-table-column>
			<el-table-column prop="difficulty" label="难度" width="100">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.difficulty == 1">一星</el-tag>
					<el-tag type="success" v-if="scope.row.difficulty == 2">二星</el-tag>
					<el-tag type="info" v-if="scope.row.difficulty == 3">三星</el-tag>
					<el-tag type="warning" v-if="scope.row.difficulty == 4">四星</el-tag>
					<el-tag type="danger" v-if="scope.row.difficulty == 5">五星</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="" label="创建时间" width="200">
				<template slot-scope="scope">
					{{ scope.row.singleCreateTime }}{{ scope.row.multipleCreateTime
          }}{{ scope.row.saCreateTime }}{{ scope.row.judgeCreateTime
          }}{{ scope.row.fillsCreateTime }}
				</template>
			</el-table-column>
			<el-table-column prop="address" label="操作" width="400">
				<template slot-scope="scope">
					<el-button type="success" icon="el-icon-search" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
					<el-button type="primary" icon="el-icon-edit" circle @click="handledit(scope.$index, scope.row)"></el-button>
					<el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
		 :page-sizes="[20,50,100, 200, 300, 400]" :page-size="pageSizenum" layout="sizes, prev, pager, next" :total="1000"
		 style="margin-top: 20px" background>
		</el-pagination>
		<el-dialog title="查看题目" :visible.sync="dialogFormVisible">
			<!-- <div slot="footer" class="dialog-footer"> -->
			<!-- <div class="preview">
				<div class="text">
					<h4>题目预览</h4> -->
					<!-- <VueShowdown :markdown="tableData1[index].content" /> -->
					<!-- <div v-if="
              tableData1[index].topic.topicName == '单选题' ||
              tableData1[index].topic.topicName == '多选题'
            ">
						<div v-for="(domain, index) in tableData" :key="domain.optionItem">
							<div>
								<el-tag type="success">{{ domain.optionItem }}</el-tag>
								<VueShowdown :markdown="domain.optionContent" class="value" />
							</div>
						</div>
					</div>
					<div>
						<h4>答案：</h4>

						<span v-if="tableData1[index].topic.topicName !== '判断题'">{{
              tableData1[index].answer
            }}</span>
						<span v-if="
                tableData1[index].topic.topicName == '判断题' &&
                tableData1[index].answer == 0
              ">错误</span>
						<span v-if="
                tableData1[index].topic.topicName == '判断题' &&
                tableData1[index].answer == 1
              ">正确</span>
					</div>
					<div>
						<h4>分数：</h4>
						<span>{{ tableData1[index].score }}分</span>
					</div>
					<div>
						<h4>知识点：</h4>
						<span>{{ tableData1[index].knowledge.label }}</span>
					</div>
					<div class="level">
						<h4>难度：</h4>
						<span>
							<el-rate v-model="tableData1[index].difficulty" disabled="disabled"></el-rate>
						</span>
					</div>
					<div class="analysis">
						<h4>解析：</h4>
						<span>{{ tableData1[index].parsing }}</span>
					</div>
				</div>
			</div> -->
		</el-dialog>

		<el-dialog title="编辑题目" :visible.sync="drawer" width="80%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="题干：" prop="input">
					<el-input v-model="ruleForm.input"></el-input>
				</el-form-item>
				<el-form-item label="作者：" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="知识点：" prop="knowledge">
					<el-cascader v-model="valuename" :options="options" @change="handleChange">
					</el-cascader>
				</el-form-item>

				<el-form-item label="分数：" prop="numm">
					<el-input-number v-model="num" :precision="2" :min="1" :max="10"></el-input-number>
				</el-form-item>
				<el-form-item label="难度：" prop="difficulty">
					<div style="margin-top: 10px">
						<el-rate v-model="value1"></el-rate>
					</div>
				</el-form-item>
				<el-form-item label="题面：">
					<mavon-editor ref="md" id="editor" v-model="ruleForm.input" :toolbars="toolbars" defaultOpen="fasle">
					</mavon-editor>
				</el-form-item>

				<div>
					<template v-if="tableData1[index1].topicId === 3">
						<el-form-item label="选项：" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-dynamic" prop="option">
							<div v-for="(domain, index) in ruleForm.domains1" :key="domain.key" class="options">
								<div>
									<span class="spann">{{ letter[index] }}</span>
									<span class="span">{{ letter[index] }}</span>
									<el-input class="input" v-model="domain.value"></el-input>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="答案：" prop="type">
							<el-radio-group v-model="checkedCities" class="checkedCities">
								<el-radio v-for="(city, index) in ruleForm.domains1" @change="type(letter[index])" :label="letter[index]" :key="city.key"
								 name="type">
									<!-- <span @click="type(letter[index])" class="typess">
                    {{ letter[index] }}
                  </span> -->
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</template>

					<template v-if="tableData1[index1].topicId === 1 || tableData1[index1].topicId === 2">
						<el-form-item label="选项：" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-dynamic" prop="option">
							<div v-for="(domain, index) in ruleForm.domains1" :key="domain.key" style="margin-top: 10px">
								<div style="display: flex">
									<span style="margin-right: 10px">{{ letter[index] }}</span>
									<el-input class="input" v-model="domain.optionContent"></el-input>
									<el-button type="danger" icon="el-icon-delete" class="button" @click.prevent="removeDomain(domain)"></el-button>
								</div>
							</div>
						</el-form-item>

						<el-form-item label="答案：" prop="type">
							<!-- 单选 -->
							<template v-if="tableData1[index1].topic.topicName === '单选题'">
								<el-radio-group v-model="checkedCities" class="checkedCities">
									<el-radio v-for="(city, index) in ruleForm.domains" :label="city" :key="city.key" name="type">
										<span @click="type(letter[index])" class="typess">
											{{ letter[index] }}
										</span>
									</el-radio>
								</el-radio-group>
							</template>
							<!-- 多选 -->
							<template v-if="tableData1[index1].topic.topicName === '多选题'">
								<el-checkbox-group v-model="checkedCities">
									<el-checkbox v-for="(city, index) in ruleForm.domains" @change="type(letter[index])" :label="letter[index]"
									 :key="city.key" name="type">
										<span @click="type(letter[index])" class="typess">
											{{ letter[index] }}
										</span>
									</el-checkbox>
								</el-checkbox-group>
							</template>
						</el-form-item>
					</template>
					<template v-if="tableData1[index1].topicId === 4 || tableData1[index1].topicId === 5">
						<el-form-item label="答案：" prop="type">
							<el-input type="textarea" v-model="ruleForm.label" rows="3"></el-input>
						</el-form-item>
					</template>
				</div>

				<el-form-item label="解析：" prop="inputss">
					<el-input type="textarea" v-model="ruleForm.analysis" rows="3"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
					<el-button type="success" @click="addDomain">新增选项</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import axios from "axios";
	import marked from "marked";
	import hljs from "highlight.js";
	import javascript from "highlight.js/lib/languages/javascript";
	import "highlight.js/styles/monokai-sublime.css";
	// import store from "@/store";
	// import {
	// 	getToken
	// } from "@/utils/auth";
	export default {
		data() {
			return {
				Subjectswitch: 'first',
				judgeId: "",
				options: [],
				knowledge: "",
				question: "",
				difficulty: "",
				stem: "",
				input: "",
				tableData1: [
				],
				input3: "",
				activeName: "",
				// currentPag:0,
				currentPage: 1,
				dialogFormVisible: false,
				index: 0,
				index1: 0,
				tableData: [],
				drawer: false,
				ruleForm: {
					domains: [],
					//判断假数据
					domains1: [{
							value: '正确'
						},
						{
							value: '错误'
						}
					],
					letter: ['√', '×'],

					knowledge: [],
					name: "",
					data: "",
					input: "1",
					analysis: "",
					delivery: false,
					type: [],
					resource: "",
					desc: "",
					label: "",
					single: {
						answer: "",
						content: "",
						createTime: "",
						difficulty: 0,
						isDelete: 0,
						knowledgeId: 0,
						option: "",
						parsing: "",
						score: 0,
						singleId: 0,
						topicId: 0,
						updateTime: "",
					},
				},
				value1: null,
				num: 1,
				checkedCities: [],
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
				centerDialogVisible: false,
				single: {},
				rules: {
					name: [{
						required: true,
						message: "请选择作者",
						trigger: "blur",
					}, ],
					input: [{
						required: true,
						message: "请输入题干",
						trigger: "blur",
					}, ],
					// inputss: [{
					// 	required: true,
					// 	message: "请输入解析",
					// 	trigger: "blur"
					// }],
					// option: [{
					// 	required: true,
					// 	message: "请设置选项",
					// 	trigger: "change"
					// }],
					numm: [{
						required: true,
						message: "请设置分数",
						trigger: "blur",
					}, ],
					difficulty: [{
						required: true,
						message: "请设置难度",
						trigger: "change",
					}, ],
					type: [{
						type: "array",
						required: true,
						message: "请至少选择一个标准答案",
						trigger: "blur",
					}, ],
					resource: [{
						required: true,
						message: "请选择活动资源",
						trigger: "change",
					}, ],
					desc: [{
						required: true,
						message: "请填写活动形式",
						trigger: "blur",
					}, ],
				},
				// options: [],
				valuename: "",

				toolbars: {
					bold: true, // 粗体
					italic: true, // 斜体
					header: true, // 标题
					underline: true, // 下划线
					strikethrough: true, // 中划线
					mark: true, // 标记
					superscript: true, // 上角标
					subscript: true, // 下角标
					quote: true, // 引用
					ol: true, // 有序列表
					ul: true, // 无序列表
					link: true, // 链接
					imagelink: true, // 图片链接
					code: false, // code
					table: true, // 表格
					fullscreen: false, // 全屏编辑
					readmodel: true, // 沉浸式阅读
					htmlcode: true, // 展示html源码
					help: true, // 帮助
					/* 1.3.5 */
					undo: true, // 上一步
					redo: true, // 下一步
					trash: true, // 清空
					save: true, // 保存（触发events中的save事件）
					/* 1.4.2 */
					navigation: true, // 导航目录
					/* 2.1.8 */
					alignleft: true, // 左对齐
					aligncenter: true, // 居中
					alignright: true, // 右对齐
					/* 2.2.1 */
					subfield: false, // 单双栏模式
					preview: true, // 预览
					toolbarsFlag: false,
				},
				blogContent: "",
				blogMdContent: "",
				text: "**chbferbfb**",
				pageSizenum: 100,
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
			};
		},
		created() {
			axios
				.post(
					"/question/single/getSingleList?currentPage=1&pageSize=50", {}
				)
				.then((res) => {
					console.log(res.data.data.dataList);
					this.tableData1 = res.data.data.dataList;
				});
			this.Inint1()
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			Inint1() {
				axios
					.post(
						'/special/getSpecials?currentPage=1&pageSize=10000', {}
					)
					.then(res => {
						console.log(res.data.data.dataList)
						this.options = res.data.data.dataList
					})
			},
			currentPage2() {},
			handleSizeChange() {},
			handleCurrentChange(val) {
				if (this.Subjectswitch === 'first') {
					console.log('进来了');
					axios
						.post(
							`/question/single/getSingleList?currentPage=${val}&pageSize=50`, {}
						)
						.then((res) => {
							this.tableData1 = res.data.data.dataList;
						});
				} else if (this.Subjectswitch === 'second') {
					axios
						.post(
							`/question/multiple/getMultipleList?currentPage=${val}&pageSize=50`, {

							}
						)
						.then((res) => {
							this.tableData1 = res.data.data.dataList;
						});
				} else if (this.Subjectswitch === 'third') {
					axios
						.post(
							`//question/short_answer/getShortAnswerList?currentPage=${val}&pageSize=50`, {}

						)
						.then((res) => {
							this.tableData1 = res.data.data.dataList;
						});
				} else if (this.Subjectswitch === 'fourth') {
					axios
						.post(
							`/question/judge/getJudgeList?currentPage=${val}&pageSize=50`, {}
						)
						.then((res) => {
							this.tableData1 = res.data.data.dataList;
						});
				} else if (this.Subjectswitch === 'five') {
					axios
						.post(
							`/question/fills/getFillsList?currentPage=${val}&pageSize=50`, {}
						)
						.then((res) => {
							this.tableData1 = res.data.data.dataList;
						});
				}
			},
			handleChange(value) {
				console.log(this.valuename)
			},

			handleClick(tab, event) {
				this.tableData1 = [];
				if (tab.name === "first") {
					this.Subjectswitch = "first"
					this.currentPage = 1;
					axios
						.post(
							"/question/single/getSingleList?currentPage=1&pageSize=50", {}
						)
						.then((res) => {
							this.tableData1 = res.data.data.dataList;
						});

					// console.log(this.tableData1);
				} else if (tab.name === "second") {
					this.Subjectswitch = 'second';
					this.currentPage = 1;
					axios
						.post(
							"/question/multiple/getMultipleList?currentPage=1&pageSize=50", {}
						)
						.then((res) => {
							console.log(res.data.data.dataList);
							this.tableData1 = res.data.data.dataList;
							this.Subjectswitch = "second"
						});


				} else if (tab.name === "fourth") {
					this.Subjectswitch = "fourth";
					this.currentPage = 1;
					axios
						.post(
							"/question/judge/getJudgeList?currentPage=1&pageSize=50", {}
						)
						.then((res) => {
							console.log(res.data.data.dataList);
							this.tableData1 = res.data.data.dataList;
						});
				} else if (tab.name === "five") {
					this.Subjectswitch = "five";
					this.currentPage = 1;
					axios
						.post(
							"/question/fills/getFillsList?currentPage=1&pageSize=50", {}
						)
						.then((res) => {
							console.log(res.data.data.dataList);
							this.tableData1 = res.data.data.dataList;
						});
				} else if (tab.name === "third") {
					// alert(12);
					this.Subjectswitch = "third";
					axios
						.post(
							"/question/short_answer/getShortAnswerList?currentPage=1&pageSize=50", {}
						)
						.then((res) => {
							// alert(res.data);
							this.tableData1 = res.data.data.dataList;
							console.log(res.data.data.dataList);
						});
				}
			},
			handleEdit(index1, row) {
				this.index = index1;
				this.dialogFormVisible = true;
				this.tableData = JSON.parse(this.tableData1[this.index].options);
				this.tableData = marked(this.tableData);
				console.log(this.tableData, "云儿");
			},
			handledit(index, row) {
				console.log(index, row)
				this.index1 = index;
				if (row.topicId == 1 || row.topicId == 2) {
					this.ruleForm.domains = JSON.parse(this.tableData1[this.index1].options);
				}
				this.ruleForm.input = this.tableData1[index].content; //题干
				this.ruleForm.name = this.tableData1[index].author;
				this.valuename = this.tableData1[index].knowledge.label; //知识点
				this.num = this.tableData1[index].score;
				this.value1 = this.tableData1[index].difficulty;
				this.ruleForm.analysis = this.tableData1[index].parsing;
				this.drawer = true;
			},
			handleDelete(index, rows) {
				if (rows.topic.topicName === "单选题") {
					const singleId = rows.singleId;
					axios
						.post(
							"/question/single/deleteSingle",
							this.qs.stringify({
								singleId: singleId
							})

						)
						.then((res) => {
							console.log(res);
						});
					this.tableData1.splice(index, 1);
				} else if (rows.topic.topicName === "多选题") {
					const multipleId = rows.multipleId;
					axios
						.post(
							"/question/multiple/deleteMultiple",
							this.qs.stringify({
								multipleId: multipleId
							})

						)
						.then((res) => {
							console.log(res);
						});
					this.tableData1.splice(index, 1);
				} else if (rows.topic.topicName === "判断题") {
					const judgeId = rows.judgeId;
					axios
						.post(
							"/question/judge/deleteJudge",
							this.qs.stringify({
								judgeId: judgeId
							})

						)
						.then((res) => {
							console.log(res);
						});
					this.tableData1.splice(index, 1);
				} else if (rows.topic.topicName === "填空题") {
					const fillsId = rows.fillsId;
					axios
						.post(
							"/question/fills/deleteFills",
							this.qs.stringify({
								fillsId: fillsId
							})
						)
						.then((res) => {
							console.log(res);
						});
					this.tableData1.splice(index, 1);
				} else if (rows.topic.topicName === "简答题") {
					const shortAnswerId = rows.shortAnswerId;
					axios
						.post(
							"/question/short_answer/deleteShortAnswer",
							this.qs.stringify({
								shortAnswerId: shortAnswerId
							})
						)
						.then((res) => {
							console.log(res);
						});
					this.tableData1.splice(index, 1);
				}
				this.$confirm("此操作将删除该文件,是否继续", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						this.$message({
							type: "success",
							message: "删除成功!",
						});
						rows.splice(index, 1);
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
				this.tableData1.splice(index, 1);
			},
			removeDomain(item) {
				var index = this.ruleForm.domains.indexOf(item);
				if (index !== -1) {
					this.ruleForm.domains.splice(index, 1);
				}
			},
			//单选题
			addDomain() {
				this.ruleForm.domains.push({
					value: "",
					key: Date.now(),
				});
			},
			submitForm(formName) {
				var data = {
					content: this.ruleForm.input,
					options: JSON.stringify([{
							optionItem: "A",
							optionContent: "xxx",
						},
						{
							optionItem: "B",
							optionContent: "xxx",
						},
						{
							optionItem: "C",
							optionContent: "xxx",
						},
						{
							optionItem: "D",
							optionContent: "xxx",
						},
					]),
					answer: this.ruleForm.input,
					parsing: this.ruleForm.analysis,
					difficulty: this.value1,
					score: this.num,
					knowledgeId: 1,
				};
				axios
					.post("/question/single/addSingle", data)
					.then((res) => {
						// this.ruleForm = res
						console.log(res);
					});
			},
			submitFormss(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert("submit!");
					} else {
						console.log("error submit!!");
						return false;
					}
				});
				axios
					.post("/api/question/single/modifySingle", this.single)
					.then((res) => {
						this.ruleForm = res;
					});
			},
			Home(){
				this.$router.push('/Home');
			}
		},
	};
</script>

<style scoped="scoped" lang="scss">
	.preview {
		margin-top: 20px;
		margin-left: 20px;
		// position: absolute;
		right: 15px;
		// border: 1px solid #aaa;

		.title {
			width: 100%;
			height: 7vh;
			// border-bottom: 1px solid #aaa;
			line-height: 7vh;
			padding-left: 20px;
		}

		.text {
			margin-top: 20px;
			padding-left: 20px;
			width: 40vw;

			div {
				margin-bottom: 5px;
			}

			.analysis {
				margin-bottom: 25px;
			}
		}
	}

	.el-dialog__body {
		height: 90vh;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #3a8bff;
				}

				&:focus {
					border-color: #3a8bff;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: rgb(58, 181, 74);
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #3a8bff;
				}
			}
		}
	}
</style>
